//搜索
import React from 'react'
import './index.css'
import {NavBar,InputItem,WingBlank,Badge,Popover} from 'antd-mobile'
import {Icon} from 'antd'
import { createForm } from 'rc-form';
import Axios from 'axios'
const Item = Popover.Item;
class Search extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      hots:[],
      visible: false,
      selected: '',
      searchResult:[]
    }
    
  }
  componentDidMount() {
    Axios.get('http://localhost:8000/search/hot').then(({data})=>{
      this.setState({
        hots:data.result.hots,
        
      })
    })

  }
  change=()=>{
    this.props.form.validateFields((error, value) => {
     if(!error){
       Axios.post('http://localhost:8000/search/suggest?keywords='+value.search+'&type=mobile').then(({data})=>{
         console.log(data.result.allMatch)
         this.setState({
            visible: true,
           searchResult:data.result.allMatch
         })
       })
     }
    })
  }
  onSelect = (opt) => {
    console.log(opt.props.value);
    this.setState({
      visible: true,
      selected: opt.props.value,
    });
  };

  render(){
    const { getFieldProps } = this.props.form;
    return(
      <div>
        <Popover
            overlayClassName="searchTips"
            visible={this.state.visible}
            overlay={this.state.searchResult.map((item,i)=>{
              return <Item key={i} value={item.keyword} icon={<Icon type='search' />}>{item.keyword}</Item>
            })}
            onSelect={this.onSelect}
          ><a></a></Popover>
          <NavBar mode='light' icon={<Icon type="left" />} onLeftClick={()=>window.location.href='/'}>
            <InputItem
              clear={true}
              className='searchValue'
              {...getFieldProps('search')}
              onBlur={this.change}
              placeholder="猜你喜欢YOUTH"
            />
          </NavBar>

          <WingBlank>
            <h3 style={{marginBottom:0}}>热门搜索</h3>
            {this.state.hots.map(item=>{
              return <Badge text={item.first}
                style={{
                  margin:"10px 10px 0 0",
                  padding:'4px 10px',
                  backgroundColor: '#eee',
                  borderRadius: 20,
                  color: '#333'
                }}
            />
            })}
          </WingBlank>
        </div>
    )
  }
}

export default createForm()(Search)